<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
    position: fixed;
    left: 0;
    top: 0;
    width: 120px;
    padding-left: 20px;
    background-color: pink;
    display: none;
}
</style>
</head>
<body>
    
<a href="https://www.baidu.com/">百度</a>
<form action="https://www.baidu.com/">
    <p>账号：<input type="text" name="user" class="user"></p>
    <p><input type="submit" value="提交"></p>
</form>
<p>与i哈吉斯附件埃是法国哈克阿三酱豆腐卡了健康了健康讨厌鬼尽快人推</p>

<div class="box">
    <p>刷新</p>
    <p>下一页</p>
    <p>上一页</p>
    <p>返回顶部</p>
</div>
<a href="" class="btn">按钮</a>

<script>
// 默认行为：
// 1.点击右键，弹出右键菜单
// 2.点击a标签中的文本，跳转到href属性地址
// 3.点击form表单中的submit按钮，提交表单数据到action属性的地址
// 4.按下鼠标左键不放并拖动，会选中页面中的文本内容
// 。。。


var box = document.querySelector('.box');
var btn = document.querySelector('.btn');
var user = document.querySelector('.user');
var form = document.querySelector('form');

// 阻止默认行为：
document.oncontextmenu = function (e){
    console.log( '点击右键。。。' );
    // e.preventDefault();// 阻止默认行为
    
    box.style.display = 'block';
    box.style.left = e.pageX + 'px';
    box.style.top = e.pageY + 'px';
    
    return false;// 阻止默认行为，注意使用位置！
}

document.onclick = function (){
    box.style.display = 'none';
}

btn.onclick = function (e){
    console.log( 'btn被点击。。。' );
    // e.preventDefault();// 阻止默认行为
    return false;// 阻止默认行为，注意使用位置！
}

form.onsubmit = function (e){
    console.log( '表单提交。。。' );

    if (!user.value) {
        alert('账号不能为空！');
        // e.preventDefault();// 阻止默认行为
        return false;// 阻止默认行为，注意使用位置！
    }
}

document.onmousedown = function (e){
    // e.preventDefault();// 阻止默认行为
    return false;// 阻止默认行为，注意使用位置！
}

</script>
</body>
</html>